<template>
    <div>
        <div class="table-header">
            <a-button class="editable-add-btn" type="primary" @click="showAdd" style="margin-bottom: 8px">新增成员</a-button>
            <div class="filter">
                <a-input-group compact>
                    <a-select v-model:value="filterGeneration" style="width:70px" placeholder="辈分" allowClear>
                        <a-select-option :value="item.id" v-for="item in generations" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                    <a-input-search v-model:value="keyword" style="width:200px;" @search="searchList" />
                </a-input-group>

            </div>
        </div>
        <a-table 
        :dataSource="dataSource" 
        :row-key="record=>record.id" 
        :pagination="{total:totalSize,current:currentPage,pageSize:pageSize,showSizeChanger:true,showQuickJumper:true}"
        @change="changePage"
        >
            <a-table-column key="name" title="姓名" data-index="name">
                <template #default="{ text }">
                    {{familyName}}{{text}}
                </template>
            </a-table-column>
            <a-table-column key="gName" title="辈分" data-index="gName"></a-table-column>
            <a-table-column key="sex" title="性别" data-index="sex">
                <template #default="{ text }">
                    <span v-if="text===1">男</span>
                    <span v-else>女</span>
                </template>
            </a-table-column>
            <a-table-column key="birthday" title="出生日期" data-index="birthday"></a-table-column>
            <a-table-column key="merry" title="婚否" data-index="merry">
                <template #default="{ text }">
                    <span v-if="text===1">已婚</span>
                    <span v-else>未婚</span>
                </template>
            </a-table-column>
            <a-table-column key="ctrls" title="操作" data-index="ctrls">
                <template #default="{ record }">
                    <a-button type="link" @click="checkRecord(record)">查看详情</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" @click="edit(record)">编辑</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" @click="addChild(record)">添加子嗣</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" danger @click="del(record)">删除</a-button>
                </template>
            </a-table-column>
        </a-table>

        <a-modal v-model:visible="editVisible" :title="waitingEditId?'编辑成员':'新增成员'" @ok="handleAdd" :width="800" :centered="true" @cancel="cancelEdit" class="edit-member">
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>姓名</a-col>
                <a-col :span="8">
                    <a-input :addon-before="familyName" v-model:value="formState.name" />
                    
                </a-col>
                <a-col :span="4" class="label-name">字</a-col>
                <a-col :span="8">
                    <a-input v-model:value="formState.character" />
                </a-col>
            </a-row>
            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>性别</a-col>
                <a-col :span="8">
                    <div class="radio">
                        <a-radio-group name="radioGroup" v-model:value="formState.sex">
                            <a-radio :value="1">男</a-radio>
                            <a-radio :value="2">女</a-radio>
                        </a-radio-group>
                    </div>
                </a-col>
                <a-col :span="4" class="label-name">号</a-col>
                <a-col :span="8">
                    <a-input v-model:value="formState.nickname" />
                </a-col>
            </a-row>

            <div class="blank"></div>
            <a-row>                
                <a-col :span="4" class="label-name"><span class="red">*</span>辈分</a-col>
                <a-col :span="8">
                    <a-select
                        v-model:value="formState.generation"
                        style="width: 100%"
                        >
                        <a-select-option :value="item.sort" v-for="item in generations" :key="item.id">{{item.name+'——'+item.sort+'世'}}</a-select-option>
                    </a-select>
                </a-col>
                <a-col :span="4" class="label-name">父亲</a-col>
                <a-col :span="8">
                    <a-select
                        ref="select"
                        v-model:value="formState.parentId"
                        style="width: 100%"
                        show-search
                        @search="handleSearch"
                        @change="handleChange"
                        :disabled="formState.generation===1||formState.generation===null"
                        :filterOption="(inputValue,option)=>filterOption(inputValue,option)"
                        >
                        <a-select-option v-for="item in parents" :value="item.id" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-select-option>
                    </a-select>
                </a-col>
            </a-row>

            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>出生日期</a-col>
                <a-col :span="8">
                    <a-date-picker v-model:value="formState.birthday" valueFormat="YYYY-MM-DD" style="width:250px" />
                </a-col>
                <a-col :span="4" class="label-name">仙逝日期</a-col>
                <a-col :span="8">
                    <a-date-picker v-model:value="formState.deadline" valueFormat="YYYY-MM-DD" style="width:250px" />
                </a-col>
            </a-row>

            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name">婚否</a-col>
                <a-col :span="8">
                    <div class="radio">
                        <a-radio-group name="radioGroup" v-model:value="formState.merry">
                            <a-radio :value="0">未婚</a-radio>
                            <a-radio :value="1">已婚</a-radio>
                        </a-radio-group>
                    </div>
                </a-col>
                <a-col :span="4" class="label-name"></a-col>
                <a-col :span="8"></a-col>
            </a-row>

            <div v-if="formState.merry===1">
                <div class="blank"></div>
                <a-row>
                    <a-col :span="4" class="label-name">结婚方式</a-col>
                    <a-col :span="8">
                        <div class="radio" v-if="formState.sex===1">
                            <a-radio-group name="radioGroup" v-model:value="formState.merryType">
                                <a-radio :value="0">娶妻</a-radio>
                                <a-radio :value="1">入赘</a-radio>
                            </a-radio-group>
                        </div>
                        <div class="radio" v-if="formState.sex===2">
                            <a-radio-group name="radioGroup" v-model:value="formState.merryType">
                                <a-radio :value="0">嫁出</a-radio>
                                <a-radio :value="1">招婿</a-radio>
                            </a-radio-group>
                        </div>
                    </a-col>
                    <a-col :span="4" class="label-name">配偶名称</a-col>
                    <a-col :span="8">
                        <a-input v-model:value="formState.spouse" />
                    </a-col>
                </a-row>
            </div>

            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name">备注</a-col>
                <a-col :span="20">
                    <a-textarea v-model:value="formState.memo" :auto-size="{ minRows: 2, maxRows: 5 }"></a-textarea>
                </a-col>
            </a-row>
        </a-modal>

        <a-drawer
        title="基本信息"
        placement="right"
        :width="400"
        :closable="false"
        :visible="userInfoVisible"
        @close="userInfoVisible=false"
        >
        <p>名称：{{userInfo.name}}</p>
        <p v-if="userInfo.character">字：{{userInfo.character}}</p>
        <p v-if="userInfo.nickname">号：{{userInfo.nickname}}</p>
        <p>辈份：第{{userInfo.gid}}世“{{userInfo.gName}}”字辈</p>
        <p>性别：<span v-if="userInfo.sex===1">男</span><span v-else>女</span></p>
        <p v-if="userInfo.merry===1"><span v-if="userInfo.sex===1">妻</span><span v-else>夫</span>：{{userInfo.spouse}}</p>
        <p>生于：{{userInfo.birthday}}</p>
        <p v-if="userInfo.deadline&&userInfo.deadline!=='null'">卒于：{{userInfo.deadline}}</p>
        <p v-if="userInfo.children&&userInfo.children.length>0">子女：
            <a-tag v-for="item in userInfo.children" :key="item.id">{{item.name}}</a-tag>
        </p>
        <p v-if="userInfo.memo">备注：{{userInfo.memo}}</p>
        </a-drawer>
    </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs,createVNode } from 'vue';
import { SmileOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue/lib';
import Http from '@/until/http';
import { messageTips } from '@/until/tools';
import config from '@/until/configs';
import { debounce } from 'lodash-es';
export default defineComponent({    
    components:{SmileOutlined,QuestionCircleOutlined},
    setup() {
        const state = reactive({
            dataSource:[],
            totalSize:0,
            currentPage:1,
            pageSize:10,
            editVisible:false,    
            filterGeneration:null,
            generations:[],
            parents:[],
            keyword:'',
            waitingEditId:null,
            familyName:config.familyName,
            userInfoVisible:false,
            userInfo:{}
        });

        const formState=reactive({
            name: '',
            character:'',
            nickname:'',
            sex:1,
            generation:null,
            parentId:null,
            birthday:null,
            deadline:null,
            merry:0,
            merryType:0,
            spouse:'',
            memo:''
        });

        const showAdd = ()=>{
            Object.assign(state,{
                editVisible:true
            })
        }

        const handleAdd = ()=>{
            if(formState.name==='') {
                messageTips('请填写名',2);
                return false;
            }
            if(!formState.generation) {
                messageTips('请填写辈分',2);
                return false;
            }
            if(formState.generation!==1&&!formState.parentId) {
                messageTips('请填写父辈',2);
                return false;
            }
            if(!formState.birthday) {
                messageTips('请填写出生日期',2);
                return false;
            }
            if(formState.merry&&!formState.spouse) {
                messageTips('请填写配偶名称',2);
                return false;
            }
            let funcName;
            let params = {...formState};
            if(state.waitingEditId) {
                funcName = 'editMember';
                params.id = state.waitingEditId;
            } else {
                funcName = 'addMember';
            }
            Http[funcName](params).then(res=>{
                if(res) {
                    if(res.success) {
                        if(state.waitingEditId) {
                            messageTips('编辑成功！',3);
                            getList({page:state.currentPage,pageSize:state.pageSize,name:state.keyword,gid:state.filterGeneration});
                        } else {
                            messageTips('新增成功！',3);
                            state.currentPage = 1;
                            getList({page:state.currentPage,pageSize:state.pageSize});
                        }
                        
                        Object.assign(state,{
                            editVisible:false,
                            waitingEditId:null
                        })
                        Object.assign(formState,{
                            name: '',
                            character:'',
                            nickname:'',
                            sex:1,
                            generation:null,
                            parentId:null,
                            birthday:null,
                            deadline:null,
                            merry:0,
                            merryType:0,
                            spouse:'',
                            memo:'',
                        })
                    } else {
                        messageTips(res.message,1);
                    }
                }
            })
        }

        const edit = (item)=>{
            Object.assign(state,{
                waitingEditId:item.id,
                editVisible:true
            });
            Object.assign(formState,{
                name: item.name,
                character:item.character,
                nickname:item.nickname,
                sex:item.sex,
                generation:item.gid,
                parentId:item.pid,
                birthday:item.birthday,
                deadline:item.deadline==='null'?null:item.deadline,
                merry:item.merry,
                merryType:item.merry_type,
                spouse:item.spouse,
                memo:item.memo,
            });
            if(item.gid>1) {
                Http.searchParent({gid:item.gid-1}).then(res=>{
                    if(res&&res.list) {
                        state.parents = res.list;
                    }
                })
            }
            
        }

        const addChild = (item)=>{
            Object.assign(state,{
                waitingEditId:null,
                editVisible:true,
                parents:[item]
            });
            Object.assign(formState,{
                name: '',
                character:'',
                nickname:'',
                sex:1,
                generation:item.gid+1,
                parentId:item.id,
                birthday:null,
                deadline:null,
                merry:0,
                merryType:0,
                spouse:'',
                memo:'',
            });
        }

        const del = (item)=>{
            Modal.confirm({
                title:'提示',
                icon: createVNode(QuestionCircleOutlined),
                content:'您确定要删除吗？',
                centered:true,
                okText:'确定',
                cancelText:'取消',
                onOk(){
                    Http.delMember({id:item.id}).then(res=>{
                        if(res) {
                            if(res.success) {
                                messageTips(res.message,3);
                                getList({page:state.currentPage});
                            }else {
                                if(res.confirm) {
                                    Modal.confirm({
                                        title:'提示',
                                        icon: createVNode(QuestionCircleOutlined),
                                        content:res.message,
                                        centered:true,
                                        okText:'继续',
                                        cancelText:'取消',
                                        onOk(){
                                            Http.delMemberAndChild({id:item.id}).then(res=>{
                                                if(res) {
                                                    if(res.success) {
                                                        messageTips(res.message,3);
                                                        getList({page:state.currentPage,pageSize:state.pageSize,name:state.keyword,gid:state.filterGeneration});
                                                    } else {
                                                        messageTips(res.message,1);
                                                    }
                                                }
                                            })
                                        }
                                    })
                                } else {
                                    messageTips(res.message,1);
                                }
                            }
                        }
                    })
                }
            })
            
        }



        const fetch= debounce((value, generation)=> {
            Http.searchParent({name:value,gid:generation?generation-1:null})
            .then(d => {
                value = '';
                Object.assign(state,{parents:d.list});
            });
        },500)


        const handleSearch = (val) => {
            fetch(val,formState.generation);
        };

        const handleChange = val => {
            formState.parentId = val;
            fetch(val,formState.generation);
        };

        const searchList = val => {
            getList({page:1,name:val,gid:state.filterGeneration})
        }

        const getList = params=>{
            Http.getMemberList(params).then(res=>{
                if(res) {
                    if(res.list) {
                        Object.assign(state,{
                            dataSource:res.list,
                            totalSize:res.count,
                        })
                        if(params.page) {
                            Object.assign(state,{                                
                                currentPage:params.page,
                            })
                        }
                        if(params.pageSize) {
                            Object.assign(state,{                                
                                pageSize:params.pageSize,
                            });
                        }
                    }
                }
            });
        }
        const changePage=(e)=>{
            let params = {
                page:e.current,
                pageSize:e.pageSize,
            }
            if(state.keyword) {
                params.name = state.keyword;
            }
            if(state.filterGeneration) {
                params.gid = state.filterGeneration;
            }
            getList(params);
        }

        const filterOption = (inputvalue,option) => {
            let name = option.children[0].children;
            if(name.indexOf(inputvalue)===-1) {
                return false;
            } else {
                return true;
            }
        }

        const cancelEdit=()=>{
            Object.assign(state,{
                waitingEditId:null,
                editVisible:false
            });
            Object.assign(formState,{
                name: '',
                character:'',
                sex:1,
                generation:null,
                parentId:null,
                birthday:null,
                deadline:null,
                merry:0,
                merryType:0,
                spouse:'',
                memo:'',
            });
        }

        const checkRecord = (item)=>{
            Object.assign(state,{
                userInfoVisible:true,
                userInfo:item
            });
        }

        onMounted(()=>{
            getList({})
            Http.getGenerationList().then(res=>{
                if(res) {
                    if(res.list) {
                        Object.assign(state,{
                            generations:res.list
                        })
                    }
                }
            })
        });

        return {
            ...toRefs(state),
            formState,
            showAdd,
            handleAdd,
            edit,
            del,
            handleSearch,
            handleChange,
            searchList,
            changePage,
            cancelEdit,
            filterOption,
            addChild,
            checkRecord
        }
    }
})
</script>

<style lang="scss">
@import '@/scss/member.scss';
</style>